<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets" >

    <h:body>

        <h:form id="formAlquilados" >
            <div class="leyendaTipoImg" style="background: #CCFFCC" /> 
            <div class="leyendaTipoTxt" ><h:outputText value="Tomados" /></div>
            <div class="leyendaTipoImg" style="background: moccasin" /> 
            <div class="leyendaTipoTxt"><h:outputText value="Ofrecidos" /></div>
            <br/><br/>
            <p:dataGrid id="grid" value="#{alquileresBean.alquileres}" var="alq" columns="1" 
                        styleClass="itemsTable" rowIndexVar="row" paginator="true" 
                        paginatorPosition="bottom" paginatorAlwaysVisible="false" 
                        emptyMessage="No hay articulos alquilados." >
                <p:column>

                    <div class="artContenedor #{alq.tomado ? 'tomado':'enviado'}" >
                        <ui:remove><div class="artTipo" style="background: #{alq.tomado ? 'green':'orange'}" ></div></ui:remove>
                        <div class="artImagen" >
                            <h:graphicImage value="/image?id=#{alq.imagenId}" 
                                            style="max-width: 120px; max-height: 100px"
                                            rendered="#{alq.imagenId != -1}" />
                            <h:graphicImage value="#{resource['images:noImage.png']}" 
                                            style="max-width: 120px; max-height: 100px"
                                            rendered="#{alq.imagenId == -1}" />
                        </div>
                        <div class="artDescripcionAlq">
                            <h5>
                                <h:link value="#{alq.titulo}" outcome="/vistas/mostrarPublicacion" >
                                    <f:param name="id" value="#{alq.idPublicacion}" />
                                </h:link>
                            </h5>
                            <div class="artDescContenido">
                                <div class="artDescCol1">
                                    <h:outputText value="#{alq.tomado ? 'De: ': 'Alquilador: '}" />
                                    <h:link value="#{alq.usuario}" outcome="/vistas/verReputacion"
                                            style="color: black; font-size: 13px" >
                                        <f:param name="id" value="#{alq.idUsuario}" />
                                    </h:link>
                                    <br/>
                                    <h:outputText value="Cantidad: #{alq.cantidad}" />
                                </div>
                                <div class="artDescCol2" >
                                    <h:outputText value="Desde: #{alq.fechaDesde}" />
                                    <br/>
                                    <h:outputText value="Hasta: #{alq.fechaHasta}" />
                                </div>
                            </div>
                            <div class="accionPrincipal">
                                <p:commandButton value="Calificar" actionListener="#{alquileresBean.prepararCalificar}"
                                                 oncomplete="calificarDlg.show()" update=":tab:calificarForm"
                                                 rendered="#{alq.calificable and not alq.calificado}" >
                                    <f:attribute name="alq" value="#{alq.idAlquiler}" />
                                </p:commandButton>
                                <p:commandButton value="Ver Calificacion" actionListener="#{alquileresBean.prepararVerCalificacion}"
                                                 oncomplete="verCalificacionDlg.show()" update=":growl :tab:formVer"
                                                 rendered="#{alq.calificable and alq.calificado}" >
                                    <f:attribute name="alq" value="#{alq.idAlquiler}" />
                                </p:commandButton>
                            </div>
                        </div>  
                        <div class="artPrecio" >
                            <div class="accionesContenedor">
                                <div class="artAcciones">
                                    <p:button value="Modificar" outcome="/vistas/usuario/modificarAlquiler" icon="ui-icon-pencil"
                                              rendered="#{not alq.tomado and alq.cancelable}">
                                        <f:param name="id" value="#{alq.idAlquiler}" />
                                    </p:button>
                                    <p:button value="Pedir Cambio" outcome="/vistas/usuario/modificarAlquiler" icon="ui-icon-pencil"
                                              rendered="#{alq.tomado and alq.cancelable and alq.idPedidoCambio == -1}">
                                        <f:param name="id" value="#{alq.idAlquiler}" />
                                    </p:button>
                                    <p:commandButton value="Cancelar" icon="ui-icon-close" process="@this"
                                                     rendered="#{alq.cancelable}" onclick="cancelarDlg.show()" >
                                        <f:setPropertyActionListener value="#{alq.idAlquiler}" target="#{alquileresBean.alquilerId}" />
                                    </p:commandButton>
                                </div>
                            </div>

                            <h:outputLabel value="Precio:" styleClass="precioLabel" />
                            <br/>
                            <h:outputText value="$ #{alq.monto}" styleClass="precio" />
                            <br/>
                            <div class="artEstado" >
                                <h:outputText value="#{alq.estadoAlquiler.toString()}" />
                            </div>

                        </div>
                        <div class="artNotificaciones" >
                            <div class="accionesContenedor"></div>
                            <p:commandButton oncomplete="pedidoCambioDlg.show()" title="Pedido de cambio recibido"
                                             rendered="#{(alq.idPedidoCambio != -1 and not alq.tomado and alq.cancelable)}"
                                             actionListener="#{alquileresBean.prepararVerPedido}" update=":tab:formPedido"
                                             icon="ui-icon-notice" style="font-size: 11px;" >
                                <f:attribute name="alq" value="#{alq.idAlquiler}" />
                                <f:attribute name="ped" value="#{alq.idPedidoCambio}" />
                            </p:commandButton>
                        </div>
                    </div>
                </p:column>
            </p:dataGrid>
        </h:form>

        <p:dialog widgetVar="cancelarDlg" header="Cancelar Alquiler"
                  modal="true" resizable="false" >
            <h:form >
                <h:outputText value="Esta seguro que desea cancelar el alquiler seleccionado?" />
                <p:separator />
                <h:panelGrid columns="2" columnClasses="leftCol,rightCol" style="width:100%" >
                    <p:commandButton value="Si" actionListener="#{alquileresBean.cancelarAlquiler}" 
                                     oncomplete="cancelarDlg.hide()" update=":tab:formAlquilados:grid :growl" />
                    <p:commandButton value="No" oncomplete="cancelarDlg.hide()" />
                </h:panelGrid>
            </h:form>
        </p:dialog>

        <p:dialog widgetVar="pedidoCambioDlg" header="Pedido de cambio recibido"
                  modal="true" resizable="false" >
            <h:form id="formPedido">
                <h:panelGrid id="pedido" columns="2" style="text-align: left"  >
                    <f:facet name="header" >
                        <h:outputText value="#{alquileresBean.alquiler.titulo}" 
                                      style="font-weight: bold; color: cornflowerblue; font-size: 12px" />
                    </f:facet>
                    <h:outputLabel value="Fecha fin actual:" />
                    <h:outputText value="#{alquileresBean.alquiler.fechaFin}" >
                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                    </h:outputText>
                    <h:outputLabel value="Nueva fecha fin:" />
                    <h:outputText value="#{alquileresBean.fechaPedido}" >
                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                    </h:outputText>
                    <h:outputLabel value="Nuevo monto:" />
                    <h:outputText value="$ #{alquileresBean.montoPedido}" />
                    <f:facet name="footer" >
                        <p:commandButton value="Aceptar" actionListener="#{alquileresBean.aceptarPedidoCambio}"
                                         update=":tab:formAlquilados:grid :growl" style="background: palegreen" 
                                         oncomplete="pedidoCambioDlg.hide()" />
                        <p:commandButton value="Rechazar" actionListener="#{alquileresBean.rechazarPedidoCambio}"
                                         update=":tab:formAlquilados:grid :growl" style="background: red; color: white" 
                                         oncomplete="pedidoCambioDlg.hide()" />
                    </f:facet>
                </h:panelGrid>
            </h:form>
        </p:dialog>

        <p:dialog widgetVar="calificarDlg" header="Calificar" modal="true" 
                  dynamic="true" resizable="false" width="240" >
            <h:form id="calificarForm" >
                <h:panelGrid columns="1" >  
                    <f:facet name="header" >
                        <h:outputLabel value="Producto:" />
                        <h:outputLabel value="#{alquileresBean.alquiler.titulo}" 
                                       style="font-weight: bold; color: steelblue" />
                        <br/>
                        <h:outputLabel value="#{alquileresBean.alquiler.tomado ? 'Dueño:': 'Alquilador:'}" />
                        <h:outputLabel value="#{alquileresBean.alquiler.usuario}" 
                                       style="font-weight: bold; color: steelblue" />

                    </f:facet>

                    <h:outputText value="Puntuación:" />
                    <h:selectOneMenu id="puntuacion" value="#{alquileresBean.puntuacionId}" >
                        <f:selectItems id="itemsPuntuacion" value="#{alquileresBean.puntuaciones}" />
                    </h:selectOneMenu>                                   
                    <h:outputText value="Ingresa un comentario acerca del producto y el usuario:" />
                    <p:inputTextarea id="comentario" value="#{alquileresBean.comentario}" 
                                     style="width:200px;height:100px;" />
                    <f:facet name="footer" >
                        <h:panelGrid columns="2" columnClasses="leftCol,rightCol" style="width:100%" >
                            <p:commandButton value="Calificar" actionListener="#{alquileresBean.registrarCalificacion}" 
                                             oncomplete="calificarDlg.hide()" update=":tab:formAlquilados :growl" />
                            <p:commandButton value="Cancelar" type="reset" onclick="calificarDlg.hide()" />
                        </h:panelGrid>
                    </f:facet>
                </h:panelGrid>
            </h:form>
        </p:dialog>

        <p:dialog modal="true" widgetVar="verCalificacionDlg" header="Ver Calificación"  dynamic="true"
                  resizable="false" width="550" style="text-align: center" >
            <h:form id="formVer">
                <div style="float: left; width: 250px; vertical-align: middle; text-align: left">
                    <h:outputText value="El dueño todavía no calificó" style="font-style: oblique" 
                                  rendered="#{alquileresBean.calificacionOfrece == null}" />
                    <h:panelGrid columns="1" rendered="#{alquileresBean.calificacionOfrece != null}">
                        <h:outputText value="Calificación del dueño (
                                      #{alquileresBean.calificacionOfrece.idUsuarioCalificador eq alquileresBean.usuarioLogueado ?
                                        'Tu': alquileresBean.calificacionOfrece.nombreUsuarioCalificador})" />
                        <h:outputText value="Puntuación: #{alquileresBean.calificacionOfrece.nombrePuntuacion}" />
                        <h:outputText value="Comentario:" />
                        <h:outputText value="#{alquileresBean.calificacionOfrece.comentarioCalificacion}" style="font-style: oblique"  />
                        <h:outputText value="Réplica:" rendered="#{alquileresBean.tomado or alquileresBean.calificacionOfrece.yaReplico}" />
                        <h:outputText value="#{alquileresBean.calificacionOfrece.comentarioReplica}" style="font-style: oblique" 
                                      rendered="#{alquileresBean.calificacionOfrece.yaReplico}" />
                        <h:inputTextarea value="#{alquileresBean.calificacionOfrece.comentarioReplica}" 
                                         style="max-width:200px; width:200px; resize: none" 
                                         rendered="#{alquileresBean.tomado and not alquileresBean.calificacionOfrece.yaReplico}" />
                        <p:commandButton value="Enviar Réplica" actionListener="#{alquileresBean.registrarReplicaOfrece}" 
                                         rendered="#{alquileresBean.tomado and not alquileresBean.calificacionOfrece.yaReplico}"
                                         update="@form" />
                    </h:panelGrid>
                </div>
                <div style="float: left; width: 250px; vertical-align: middle; text-align: left">
                    <h:outputText value="El alquilador todavía no calificó" style="font-style: oblique" 
                                  rendered="#{alquileresBean.calificacionToma == null}" />
                    <h:panelGrid columns="1" rendered="#{alquileresBean.calificacionToma != null}">
                        <h:outputText value="Calificación del alquilador (
                                      #{alquileresBean.calificacionToma.idUsuarioCalificador eq alquileresBean.usuarioLogueado ?
                                        'Tu': alquileresBean.calificacionToma.nombreUsuarioCalificador})" />
                        <h:outputText value="Puntuación: #{alquileresBean.calificacionToma.nombrePuntuacion}" />
                        <h:outputText value="Comentario:" />
                        <h:outputText value="#{alquileresBean.calificacionToma.comentarioCalificacion}" style="font-style: oblique"  />
                        <h:outputText value="Réplica:" rendered="#{not alquileresBean.tomado or alquileresBean.calificacionOfrece.yaReplico}" />
                        <h:outputText value="#{alquileresBean.calificacionToma.comentarioReplica}" style="font-style: oblique" 
                                      rendered="#{alquileresBean.calificacionToma.yaReplico}" />
                        <h:inputTextarea value="#{alquileresBean.calificacionToma.comentarioReplica}" 
                                         rendered="#{not alquileresBean.tomado and not alquileresBean.calificacionOfrece.yaReplico}"
                                         style="max-width:200px; width:200px; resize: none"/>
                        <p:commandButton value="Enviar Réplica" actionListener="#{alquileresBean.registrarReplicaToma}" 
                                         rendered="#{not alquileresBean.tomado and not alquileresBean.calificacionOfrece.yaReplico}"
                                         update="@form" />
                    </h:panelGrid>
                </div>
            </h:form>
        </p:dialog>

    </h:body>
</html>

